<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="format-detection" content="telephone=no" />
		<title>memory</title>
		<link rel="stylesheet" type="text/css" href="../css/FIP-1.0.css" />
		<link rel="stylesheet" type="text/css" href="memory.css" />
		
		<script type="text/javascript" src="../js/FIP-1.0.js"></script>
		<script type="text/javascript">
			//全局变量
			var global_para={
				eventClick:(FIP.isTouch ? 'touchstart' : 'click')
			};
		
			FIP.ready(function(){
				FIP.stopPageDrag();
				FIP.stopHandSelect("#startGame");
				
				var memory;
				
				//确认游戏是否暂停。暂停为true
				var pauseKey=false;
				
				//确认游戏是否点击了开始。开始了为true
				var startKey=false;
				
				//悄悄地进行加载脚本和游戏初始化
				//反正这个时候用户不会察觉到，提高了用户体验，“加快了”游戏速度
				FIP.loadScriptEx(['memory.js'],function(){
					FIP.loading.createLoading('Loading JS...');
				},function(){
					FIP.loading.removeLoading(function(){

						memory=new Memory("canvas");
						
						memory.mission1(function(){
							//如果还没点击开始，就先暂停
							if(!startKey){
								memory.gamePause();
								pauseKey=true;
							}
								
							document.getElementById("restart").addEventListener(global_para.eventClick,function(){
								memory.mission2();
							},false);
							
							document.getElementById("lastMissionBt").addEventListener(global_para.eventClick,function(){
								memory.mission2();
							},false);
						});
					});
				});
				
				//开始游戏
				document.getElementById('startGame').addEventListener(global_para.eventClick,function(){
					startKey=true;
					
					FIP.animate({
						elem:'gameCover',
						begin:0,
						end:-416,
						speed:8,
						doingCallback:function(v){
							this.style.marginTop=v+'px';
						},
						endCallback:function(){
							FIP.hide('gameCover');
							
							if(memory && pauseKey) memory.gameContinue();
						}
					});
				},false);
				
			});//end ready();
			
		</script>
	</head>
	<body>
		<div id="page">
			
			<section id="gameCover" style="margin-top:0;">
				<h1>Memory</h1>
				
				<nav class="start-game">
					<a href="javascript:;" id="startGame">~ PLAY ~</a>
				</nav>
				
				<div id="gameCoverInfo">
					<p>Made By Paper</p>
					<p>Chrome & Safari & Firefox & Iphone4 & IE9</p>
				</div>
			</section>
			
			<div id="gameMain">
				<div id="gameTime">
					<span id="gameTimeMin">00</span>:<span id="gameTimeSec">00</span>
				</div>
				
				<section id="gameHelp">
					<p>Hi～这个简单的游戏想必大家都不陌生。只要翻开两个方块，如果图片一样就会消失。越快越好！<br />下面的时间还在走哦～～<img src="images/ww.gif" /></p>
				</section>
				
				<div id="showMsg" style="display:none;">
					<h3>你居然完成了！</h3>
					<p>用时：<span id="yourTime"></span></p>
					<p><a id="lastMissionBt" href="javascript:;">最后一关</a></p>
				</div>
				
				<div id="stopClick" style="display:none;"></div>
				
				<canvas id="canvas" width="320" height="416" style="position:relative;">
					Oops~,your browser doesn't support the HTML5 element canvas.
				</canvas>
			</div>

			<button class="button" id="restart">Restart</button>
		</div>
	</body>
</html>
